<template>
    <div class="livingCircle">
        <div class="vantTabs">
            <van-tabs sticky v-model="activeName" title-active-color="black" @click="clickTitle" title-inactive-color="black" line-width="33.33%" line-height="4px">
                <van-tab v-for="(item,index) in taskList" :key="index">
                    <template #title>{{item[0]}}</template>
                    <div style="width: 100%;height: 60px;"></div>
                    <div class="revealCon">
                        <van-list
                                v-model="loading"
                                :finished="finished"
                                finished-text="没有更多了"
                                :immediate-check="false"
                                @load="onLoad"
                        >
                          <div class="livingCircleCon" v-for="(item,index) in livingCircleConList" :key="index">
                              <div class="item">
                                  <div class="photo">
<!--                                      <p >{{item.id}}</p>-->
                                      <img :src="item.avatar " />
                                      <div class="name">
                                          <p>{{item.nickName}}</p>
                                          <span>{{item.createTime}}</span>
                                      </div>
                                  </div>
                                  <div class="textCon">
                                      <p v-for="(a,j) in item.content.split('\n')">{{a}}</p>
                                  </div>
                                  <div class="img">
                                      <div class="imgBor" v-for="(i,d) in item.sources.split(',')" :key="d">
                                          <div class="imgPd">
                                              <img :src="i"/>
                                          </div>
                                      </div>
                                  </div>
                                  <div class="copyText" @click="clickCopyText(item.id)">
                                      复制文案
                                  </div>
                              </div>

                          </div>

                        </van-list>
                    </div>
                </van-tab>
            </van-tabs>
        </div>
        <router-link tag="div" :to="'/publishCon?currentQuanType='+currentQuanType+'&recordActive='+activeName" class="add">
            +
        </router-link>
        <div  style="height: 50px;width: 100%"></div>
        <!--        底部导航栏-->
        <foot-nav></foot-nav>
    </div>
</template>

<script>
    import footNav from "../components/base/tabbar.vue"
    import quanApi from '@/api/quan'
    export default {
        name: "livingCircle",
        data(){
            return{
                page:{
                  pages:0,
                  pageNo:1,
                  pageSize:10,
                  quanType:'life'
                },
                activeName:0,
                count: 0,
                loading: false,
                finished: false,
                livingCircleConList: [

                ],
                taskList:[
                  ['生活圈','life'],['纯秀圈','chunxiu'],['朋友圈','friends']
                ],
              currentQuanType:'life',
                list:[],
            }
        },
        beforeCreate(){

        },
      created() {
          if(this.$route.query.livsuaa1){
              this.activeName = Number(this.$route.query.livsuaa1)
              this.page.quanType = this.$route.query.livsuaass1
              this.currentQuanType = this.$route.query.livsuaass1
              this.getQuanList()
              let urls2 =window.location.href
              window.location.href = urls2.split('?')[0]
              return
          }
          console.log(this.$route.query.liv)
          if(this.$route.query.liv){
              this.activeName = Number(this.$route.query.liv)
              this.page.quanType = this.$route.query.livsuType
              this.currentQuanType = this.$route.query.livsuType
          }
          this.getQuanList()
          let urls3 =window.location.href
          window.location.href = urls3.split('?')[0]

      },
      methods: {
            clickTitle(name){
                    let urls =window.location.href
                    window.location.href = urls.split('?')[0]
              this.currentQuanType = this.taskList[name][1]
                console.log( this.currentQuanType)
                this.page.pageNo = 1
              this.page.quanType = this.currentQuanType
                this.getQuanList()
            },
            getQuanList(){
              quanApi.quanList(this.page).then(res=>{
                  this.page.pages = res.data.pages
                  this.livingCircleConList = res.data.records
                  this.finished = false
              })
            },
            onLoad() {
                this.page.pageNo += 1
                    quanApi.quanList(this.page).then(res=>{
                        console.log(res)
                        var tal = res.data.pages
                        this.livingCircleConList = this.livingCircleConList.concat(res.data.records)
                        this.loading = false;
                        if(tal == 1){
                            this.page.pageNo = 1
                        }
                        if(tal == 0){
                            this.page.pageNo = 0
                        }
                        if(this.page.pageNo == tal){
                            this.finished = true;
                            this.page.pageNo =1
                        }

                    })
            },

          //复制文案
          clickCopyText(ids) {
              for (var i = 0; i <= this.livingCircleConList.length; i++) {
                  if (this.livingCircleConList[i].id == ids) {
                      this.$copyText(this.livingCircleConList[i].content).then(
                          e => {
                              this.$toast('复制成功');
                          },
                          e => {
                              this.$toast('复制失败');
                          }
                      )
                  }
              }

          },
        },
        components:{
            footNav
        },
    }
</script>

<style lang="less" scoped>
    .livingCircle{
        width: 100%;
        min-height: 100%;
        background: #f8f8f8;
    }
    .vantTabs{
        width: 100%;

        /deep/.van-sticky{
            width: 100%;
            position: fixed;
            top: 0px;
            left: 0;
        }
        /deep/.van-tabs__nav{
           background: #f8f5be;
        }
        /deep/.van-tab{
            font-size: 16px;
            /*font-weight: bold;*/
        }
        /deep/.van-tab--active {
            font-weight: 600;
        }
        /deep/.van-tabs__line{
            background: #ffffff;
        }
        /deep/.van-tabs--line .van-tabs__wrap{
            height: 50px;
        }
        .revealCon {
            width: 100%;
            .livingCircleCon{
                margin-bottom: 10px;
                background: #ffffff;
                .item{
                    padding: 10px 10px 0px 10px;
                    .photo{
                        display: flex;
                        align-items: center;
                        margin-bottom: 10px;
                        img{
                            width: 50px;
                            height: 50px;
                            border-radius: 50%;
                        }
                        .name{
                            flex: 1;
                            margin-left: 10px;
                            span{
                                font-size: 12px;
                                color: #bfbebc;
                            }
                        }
                    }
                    .textCon{

                    }
                    .img {
                        display: flex;
                        flex-wrap: wrap;

                        .imgBor {
                            width: 33.33%;

                            .imgPd {
                                padding: 3px;

                                img {
                                    width: 100%;
                                    height: 100%;
                                }
                            }
                        }
                    }

                    .copyText{
                        width: 100%;
                        padding: 6px 0;
                        background: #f8f5be;
                        text-align: center;
                        /*color: #ffffff;*/
                        margin-top: 10px;
                    }
                }
            }

        }
    }
    .add{
        width: 50px;
        height: 50px;
        border-radius: 50%;
        text-align: center;
        line-height: 50px;
        background: #f8f5be;
        position: fixed;
        bottom: 80px;
        right: 10px;
        color: black;
        font-size: 32px;

    }
</style>
